<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- mui-insertion-point -->
    <title>Rum</title>
  </head>
  <body>
    <div id="root">
      <div class="title-bar">
        <div class="app-logo"></div>
        <div class="apps-button-box">
          <div class="btn min-btn">
            <img src="" alt="" width="20">
          </div>
          <div class="btn max-btn">
            <img src="" alt="" width="20">
          </div>
          <div class="btn close-btn">
            <img src="" alt="" width="20">
          </div>
        </div>
      </div>
      <div class="loading"></div>
      <style>
        body {
          margin: 0;
        }
        #root {
          display: flex;
          flex-flow: column;
          width: 100vw;
          height: 100vh;
        }
        .loading {
          flex: 1;
          height: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #afafaf;
          font-size: 16px;
          margin-top: -30px;
        }
        .title-bar-fake {
          height: 40px;
          background-color: #6f6f6f;
        }
        .title-bar {
          display: none;
          justify-content: space-between;
          height: 40px;
          -webkit-app-region: drag;
          background-color: #6f6f6f;
          background-size: auto 40px;
          background-position: 148px 0;
          background-repeat: no-repeat;
          box-shadow: 0 0 5px rgba(0, 0, 0, 0.3)
        }

        .app-logo {
          display: flex;
          align-self: stretch;
          background-size: 148px auto;
          background-repeat: no-repeat;
          background-position: 5px -8px;
          width: 153px;
        }

        .apps-button-box {
          display: flex;
          align-items: center;
          margin-left: 16px;
          position: absolute;
          right: 0;
          top: 0;
          height: 40px;
        }

        .btn {
          display: flex;
          justify-content: center;
          align-items: center;
          -webkit-app-region: none;
          margin-left: 1px;
          height: 40px;
          width: 40px;
          background-size: 20px 19px;
          background-position: center;
          background-repeat: no-repeat;
        }

        .close-btn {
          width: 48px;
          background-position: calc(50% - 4px) center;
        }
      </style>
    </div>
    <script>
      if (typeof process === 'object' && process.env.NODE_ENV === 'development') {
        const loadingElement = document.querySelector('.loading');
        loadingElement.innerHTML = 'loading...';
      }
    </script>
  </body>
</html>
